<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="玩法授权"
    :showOkBtn="false"
    :showCancelBtn="false"
    :width="1000"
  >
    <BasicForm @register="registerForm"/>
    <BasicTable @register="registerTable" @edit-end="handleEditEnd" @edit-cancel="handleEditCancel"
                :beforeEditSubmit="beforeEditSubmit">
      <template #img="{ text }">
        <Image :height="30" :width="30" :src="text"/>
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script setup lang="ts">
import {useMessage} from '@/hooks/web/useMessage';
import {BasicModal, useModalInner} from '@/components/Modal';
import {BasicForm, useForm} from '@/components/Form';
import {BasicColumn, BasicTable, useTable} from '@/components/Table';
import {Image} from 'ant-design-vue';
import {isNotEmpty} from "@/utils/is";
import {authPlayApi, listAuthPlayApi} from "@/api/core/cp.api";
import {
  CpAuthPlayListLM,
} from "@/model/core/cpAuthPlayList.model";
import {Tag} from 'ant-design-vue';
const emit = defineEmits(['success', 'register']);
const {createMessage} = useMessage();

const [registerForm, {resetFields, setFieldsValue, validate, getFieldsValue}] = useForm({
  labelWidth: 100,
  schemas: [
    {
      field: 'id',
      component: 'Input',
      show: false,
    }],
  showActionButtonGroup: false,
});
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  resetFields();
  setModalProps({confirmLoading: false});
  setFieldsValue({...data.record});
  let authPlayData = await listAuthPlayApi(data.record.id) as CpAuthPlayListLM;
  setProps({
    dataSource: authPlayData.items
  });
});
const columns: BasicColumn[] = [
  {
    dataIndex: 'baseTicketId',
    width: 0,
  },
  {
    title: '样票图片',
    dataIndex: 'img',
    slots: {customRender: 'img'},
    width: 30,
  },
  {
    title: '玩法名称',
    dataIndex: 'playName',
    width: 50,
  },
  {
    title: '方案编号',
    dataIndex: 'playNo',
    width: 50,
  },
  {
    title: '销售授权',
    dataIndex: 'authSell',
    edit: true,
    editComponent: 'Checkbox',
    editValueMap: (value) => {
      return value?'已授权':'未授权';
    },
    width: 50,
  },
  {
    title: '兑奖授权',
    dataIndex: 'authCash',
    edit: true,
    editComponent: 'Checkbox',
    editValueMap: (value) => {
      return value?'已授权':'未授权';
    },
    width: 50,
  }
];
const [registerTable, {reload, setProps}] = useTable({
  // title: '可编辑单元格示例',
  columns: columns,
  showIndexColumn: true,
  bordered: false,
  isCanResizeParent: true,
  scroll: { y: 800 },
});

function handleEditEnd({record, index, key, value}: Recordable) {
  console.log(record, index, key, value);
  return false;
}

// 模拟将指定数据保存
async function feakSave(data, key, value) {
  createMessage.loading({
    content: `正在保存玩法授权配置`,
    key: '_save_fake_data',
    duration: 0,
  });
  await authPlayApi(data).then(() => {
    createMessage.success({
      content: (key === 'authSell' ? '销售授权' : '兑奖授权') + (value ? '成功' : '取消成功'),
      key: '_save_fake_data',
      duration: 2,
    });
  });
}

async function beforeEditSubmit({record, index, key, value}) {
  const {id} = getFieldsValue();
  let data = {
    baseCpId: id,
    baseTicketId: record.baseTicketId,
    authSell: isNotEmpty(record.authSell) ? (record.authSell ? 0 : 1) : 1,
    authCash: isNotEmpty(record.authCash) ? (record.authCash ? 0 : 1) : 1,
  }
  return await feakSave(data, key, value);
}

function handleEditCancel() {
  console.log('cancel');
}

</script>
